<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>云层滚动效果</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				height: 400px;
				margin-top: 100px;
				background-color: skyblue;
				position: relative;
				animation:  change 5s linear 0s infinite alternate;
				overflow: hidden;
		
			}
			@keyframes change{
				from{
					background-color: skyblue;
				}
				to{
					background-color: black;
				}
			}
			ul li{
				list-style: none;
				/*宽度变大*/
				width: 400%;
				height: 100%;
	
				position: absolute;
				left: 0;
				top: 0;
				
			}
			/*三张云图片运动*/
			ul li:nth-child(1){
							
				background-image: url(../img/cloud_one.png) ;
			
			animation: one 20s linear 0s infinite alternate;
			}
			ul li:nth-child(2){
							
				background-image: url(../img/cloud_two.png) ;
				animation: two 20s linear 0s infinite alternate;
			}
			ul li:nth-child(3){
							
				background-image: url(../img/cloud_three.png) ;
			animation: three 20s linear 0s infinite alternate;
			}
			@keyframes one{
				from{
					margin-left: 0;
				}
				to{
					margin-left: -100%;
				}
			}
			@keyframes two{
				from{
					margin-left: -100%;
				}
				to{
					margin-left: -200%;
				}
			}
			@keyframes three{
				from{
					margin-left: -200%;
				}
				to{
					margin-left: -300%;
				}
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
